<template>
	<section class="free-chance-box">
		<div class="free-chance">
			<div class="pt30rem top"></div>
			<div class="pb30rem bottom"></div>
			<div class="content align-center h100">
				<div class="free-chance-top h50">
					<p class="fs30rem pt100rem mb30rem bold">分享朋友圈</p>
					<p class="fs40rem cxo-red-color mb30rem bold">增加免费抽奖机会</p>
					<p class="fs24rem c999 mb50rem">抽奖机会越多，能拿到该商品几率越大</p>
					<img src="../../../assets/free_img.png" alt="">
					<i class="line"></i>
					<i class="garden-left garden"></i>
					<i class="garden-right garden"></i>
				</div>
				<div class="free-chance-button fs28rem c666 align-center h50">
					<div class="free-chance-button-text">
						<p>1.点击下方按钮</p>
						<p>2.{{time * 1000,'MM月dd日'| formatDate }}前分享专属链接至朋友圈</p>
						<p>3.即可增加该商品免费抽奖的机会</p>
					</div>
					<button class="white cxo-red fs34rem mt80rem" @click="shareSubmit">立即分享</button>
				</div>
			</div>
			<p class="footnote">前牛商城</p>
		</div>
		<div class="help-share" v-show="shareShow" @click="shareShow = false">
			<ul class="flex-left pt30rem pb30rem" v-if='isiOS'>
				<li @click="share('wechat')">
					<i class="iconfont icon-weixin1 wechat auto"></i>
					<span>微信</span>
				</li>
				<li @click="share('friends')">
					<i class="iconfont icon-pengyouquan circle auto"></i>
					<span>朋友圈</span>
				</li>
				<!-- <li>
					<i class="iconfont icon-qq qq"></i>
					<span>QQ</span>
				</li>
				<li>
					<i class="iconfont icon-weibo weibo"></i>
					<span>微博</span>
				</li> -->
			</ul>
			<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
		</div>
		<div class="wechatCode" v-if="codeShow" @click="codeShow = !codeShow">
			<div class="box">
				<p class="bg-white pt30rem pb30rem fs32rem align-center">请关注前牛新品</p>
				<img class="responsive-img" :src="codeUrl" alt="">
			</div>
		</div>
	</section>
</template>

<script>
	import { getLotteryWxshare, getFreeLotteryShare, getWechatConfig, getWechatShare } from '@/api/goods-detail';
	import $toast from '@/utils/toast';
	import { formatDate,iosapp } from "@/utils";
	export default{
        data()
		{
			return{
				wechatConfig : [],
				share_info   : [],
				shareShow    : false,
				codeShow     : false,
				goods_id     : this.$route.query.goodsId,
				fuid         : this.$route.query.fuid,//获取分享链接上的fuid用于渲染上级用户数据
				uid          : window.localStorage.getItem('uid'),//当前用户ID
				time         : Number(this.$route.query.time),
				isiOS        : window.sessionStorage.getItem('isapp'),
			}
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
	  	},
		created()
		{
			this.loadData();
			this.getConfig();
		},
		methods:
		{
			loadData()
			{
				let paramsFuid =
				{
					fuid     : this.fuid,
					uid      : this.uid,
					goods_id : this.goods_id,
				}
				if(this.fuid)
				{
					getFreeLotteryShare(paramsFuid).then(res =>{
						$toast(res.msg);
					});
					return;
				}
			},
			getConfig() { 
		        let url = location.href.split('#')[0] //获取锚点之前的链接
		        getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.Share(res);
		        });
		    },

		    Share(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});

				let params = {
					fuid : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
				}
				//获取微信config
				getLotteryWxshare(params).then(res =>{
					console.log(res)
					let url = location.href.split('#')[0];
					let links = res.data.url;
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
				
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
			shareSubmit()
			{

				this.shareShow = true;

				let paramsLike = {
					fuid     : this.uid,
					goods_id : this.goods_id,
				};
				
				if(this.isiOS) return;

				getLotteryWxshare(paramsLike).then(res =>{
					this.share_info = res.data;
				});
			},
			share(name)
			{
				let params = {
					fuid     : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
					iOSCode  : 'lottery_wxshare'
				}
				if(name == 'wechat')
					iosapp('shareWechat',params)
				else
					iosapp('shareFriends',params)
			}
		}
	}
</script>

<style lang="less">
	.free-chance-box
	{
		width: 100%;
		height: 100%;
		position: absolute;
		background: #ff0036;
		.free-chance
		{
			background: #fff;
			height: 100%;
			width: 92%;
			margin-right: auto;
			margin-left: auto;
			border-radius: 5px;
			.free-chance-top
			{
				.garden-left
				{
					width:30/28rem;
					height:60/28rem;
					background-color:#ff0036;
					border-radius:30/28rem 0 0 30/28rem;
					display: block;
					position: absolute;
					top: 50%;
					right: 30/28rem;
					transform: translate(0,-50%);
				}
				.garden-right
				{
					width:30/28rem;
					height:60/28rem;
					background-color:#ff0036;
					border-radius:0 30/28rem 30/28rem 0;
					display: block;
					position: absolute;
					top: 50%;
					left: 30/28rem;
					transform: translate(0,-50%);
				}
				img
				{
					display: block;
					width: 452/28rem;
					height: 259/28rem;
					margin-right: auto;
					margin-left: auto; 
				}
			}
			.free-chance-button
			{
				margin-top: 50/28rem;
				.free-chance-button-text
				{
				    text-align: left;
    				display: inline-block;
					p
					{
						line-height: 200%;
					}
				}
				button
				{
					border-radius: 40/28rem;
					width: 480/28rem;
					height: 80/28rem;
					line-height: 80/28rem;
				}
			}
			.footnote
			{
				position: absolute;
				bottom:40/28rem;
				width: 100%;
				left: 0;
				text-align: center;
				&:before
				{
					content:'';
					margin-right: 40/28rem;
					background: #999;
					width: 50/28rem;
					height: 1px;
					display: inline-block;
					vertical-align: middle;
				}
				&:after
				{
					content:'';
					margin-left: 40/28rem;
					background: #999;
					width: 50/28rem;
					height: 1px;
					display: inline-block;
					vertical-align: middle;
				}
			}
			.top
			{
				background: #ff0036;
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
			}
			.bottom
			{
				background: #ff0036;
				position: absolute;
				bottom:0;
				left: 0;
				width: 100%;
			}
			.line
			{
				border-top:1px dashed #e5e5e5;
				height: 1px;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 91%;
				transform:translate(-50%,-50%);
			}
		}
		.help-share
		{
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;
			background: rgba(0,0,0,.8);
			width: 100%;
			height: 100%;
			img
			{
				width: 100%;
				display: block;
			}
			ul
			{
				position:fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #fff;
				li
				{
					width: 25%;
					text-align: center;
				i
				{
					width: 100/28rem;
					height: 100/28rem;
					border-radius: 50%;
					line-height: 100/28rem;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 60/28rem;
				}
				.weibo
				{
					background: #fe555f;
				}
				.wechat
				{
					background: #21cc51;
				}
				.qq
				{
					background: #65aef3
				}
				.circle
				{
					background: #9b8cc6;
				}
				span
				{
					font-size: 28/28rem;
					display: block;
					margin-top: 20/28rem;
				}
			}
		}
		}
	}
</style>